<template>
  <PageContainer title="投递管理">
    <!-- 搜索筛选区域 -->
    <SearchForm v-model="searchForm" @search="handleSearch" @reset="handleReset">
      <el-form-item label="记录筛选">
        <el-input
          v-model="searchForm.keyword"
          placeholder="请输入用户名或设备编号"
          clearable
        />
      </el-form-item>
      <el-form-item label="投递状态">
        <el-select
          v-model="searchForm.status"
          placeholder="请选择投递状态"
          clearable
        >
          <el-option label="成功" value="success" />
          <el-option label="异常" value="exception" />
          <el-option label="待处理" value="pending" />
          <el-option label="已取消" value="cancelled" />
        </el-select>
      </el-form-item>
      <el-form-item label="垃圾类型">
        <el-select
          v-model="searchForm.wasteType"
          placeholder="请选择垃圾类型"
          clearable
        >
          <el-option label="塑料" value="plastic" />
          <el-option label="纸类" value="paper" />
          <el-option label="金属" value="metal" />
          <el-option label="玻璃" value="glass" />
          <el-option label="织物" value="textile" />
          <el-option label="其他" value="other" />
        </el-select>
      </el-form-item>
      <el-form-item label="设备筛选">
        <el-select
          v-model="searchForm.deviceId"
          placeholder="请选择设备"
          clearable
          filterable
        >
          <el-option
            v-for="device in deviceOptions"
            :key="device.id"
            :label="`${device.name} (${device.code})`"
            :value="device.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="投递时间">
        <el-date-picker
          v-model="searchForm.dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="重量范围">
        <div class="weight-range">
          <el-input-number
            v-model="searchForm.minWeight"
            :min="0"
            :max="100"
            :precision="2"
            placeholder="最小重量"
            style="width: 120px"
          />
          <span style="margin: 0 8px">-</span>
          <el-input-number
            v-model="searchForm.maxWeight"
            :min="0"
            :max="100"
            :precision="2"
            placeholder="最大重量"
            style="width: 120px"
          />
          <span style="margin-left: 8px; color: #909399">kg</span>
        </div>
      </el-form-item>
    </SearchForm>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <StatCard
        :icon="DocumentCopy"
        icon-bg="#409EFF"
        :value="disposalStats.totalCount"
        label="总投递次数"
        :trend="disposalStats.totalTrend"
      />
      <StatCard
        :icon="CircleCheck"
        icon-bg="#67C23A"
        :value="disposalStats.successCount"
        label="成功投递"
        :trend="disposalStats.successTrend"
      />
      <StatCard
        :icon="Warning"
        icon-bg="#F56C6C"
        :value="disposalStats.exceptionCount"
        label="异常投递"
        :trend="disposalStats.exceptionTrend"
      />
      <StatCard
        :icon="Money"
        icon-bg="#E6A23C"
        :value="`¥${disposalStats.totalEarnings}`"
        label="总收益"
        :trend="disposalStats.earningsTrend"
      />
    </div>

    <!-- 操作按钮区域 -->
    <div class="action-bar">
      <div class="action-left">
        <el-button
          type="warning"
          :disabled="!selectedRows.length"
          @click="handleBatchException"
        >
          <el-icon><Warning /></el-icon>
          批量标记异常
        </el-button>
        <el-button
          type="success"
          :disabled="!selectedRows.length"
          @click="handleBatchResolve"
        >
          <el-icon><CircleCheck /></el-icon>
          批量处理
        </el-button>
        <el-button
          type="info"
          @click="handleExport"
        >
          <el-icon><Download /></el-icon>
          导出数据
        </el-button>
        <el-button
          type="primary"
          @click="handleStatistics"
        >
          <el-icon><DataAnalysis /></el-icon>
          统计分析
        </el-button>
      </div>
      <div class="action-right">
        <el-button
          type="info"
          @click="loadDisposalList"
        >
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
      </div>
    </div>

    <!-- 投递记录表格 -->
    <DataTable
      :data="disposalList"
      :loading="loading"
      :pagination="pagination"
      @page-change="handlePageChange"
      @size-change="handleSizeChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="记录ID" width="100" />
      <el-table-column label="用户信息" width="150">
        <template #default="{ row }">
          <div class="user-info">
            <div class="user-name">{{ row.userName }}</div>
            <div class="user-phone">{{ row.userPhone }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="设备信息" width="180">
        <template #default="{ row }">
          <div class="device-info">
            <div class="device-name">{{ row.deviceName }}</div>
            <div class="device-code">{{ row.deviceCode }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="垃圾类型" width="100">
        <template #default="{ row }">
          <el-tag :type="getWasteTypeTag(row.wasteType)">
            {{ getWasteTypeText(row.wasteType) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="重量(kg)" width="100" sortable>
        <template #default="{ row }">
          <span class="weight-value">{{ row.weight }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收益" width="100" sortable>
        <template #default="{ row }">
          <span class="earnings-value">¥{{ row.earnings }}</span>
        </template>
      </el-table-column>
      <el-table-column label="投递状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getStatusTag(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="质检状态" width="100">
        <template #default="{ row }">
          <el-tag
            v-if="row.qualityStatus"
            :type="getQualityStatusTag(row.qualityStatus)"
          >
            {{ getQualityStatusText(row.qualityStatus) }}
          </el-tag>
          <span v-else class="text-muted">-</span>
        </template>
      </el-table-column>
      <el-table-column label="投递时间" width="180" sortable>
        <template #default="{ row }">
          {{ formatDateTime(row.createdAt) }}
        </template>
      </el-table-column>
      <el-table-column label="处理时间" width="180">
        <template #default="{ row }">
          {{ row.processedAt ? formatDateTime(row.processedAt) : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button
            type="primary"
            size="small"
            @click="handleViewDetail(row)"
          >
            详情
          </el-button>
          <el-button
            v-if="row.status === 'exception'"
            type="success"
            size="small"
            @click="handleResolve(row)"
          >
            处理
          </el-button>
          <el-dropdown @command="(command: string) => handleMoreAction(command, row)">
            <el-button type="text" size="small">
              更多<el-icon><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="quality-check">质检处理</el-dropdown-item>
                <el-dropdown-item command="view-images">查看图片</el-dropdown-item>
                <el-dropdown-item command="user-profile">用户档案</el-dropdown-item>
                <el-dropdown-item command="device-status">设备状态</el-dropdown-item>
                <el-dropdown-item 
                  command="mark-exception" 
                  :disabled="row.status === 'exception'"
                  divided
                >
                  标记异常
                </el-dropdown-item>
                <el-dropdown-item 
                  command="cancel" 
                  :disabled="row.status === 'cancelled'"
                >
                  取消投递
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </DataTable>

    <!-- 投递详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="投递详情"
      width="80%"
    >
      <div v-if="currentDisposal" class="disposal-detail">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-descriptions title="基本信息" :column="1" border>
              <el-descriptions-item label="记录ID">
                {{ currentDisposal.id }}
              </el-descriptions-item>
              <el-descriptions-item label="用户姓名">
                {{ currentDisposal.userName }}
              </el-descriptions-item>
              <el-descriptions-item label="用户手机">
                {{ currentDisposal.userPhone }}
              </el-descriptions-item>
              <el-descriptions-item label="设备名称">
                {{ currentDisposal.deviceName }}
              </el-descriptions-item>
              <el-descriptions-item label="设备编号">
                {{ currentDisposal.deviceCode }}
              </el-descriptions-item>
              <el-descriptions-item label="垃圾类型">
                <el-tag :type="getWasteTypeTag(currentDisposal.wasteType)">
                  {{ getWasteTypeText(currentDisposal.wasteType) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="重量">
                {{ currentDisposal.weight }}kg
              </el-descriptions-item>
              <el-descriptions-item label="收益">
                ¥{{ currentDisposal.earnings }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
          <el-col :span="12">
            <el-descriptions title="状态信息" :column="1" border>
              <el-descriptions-item label="投递状态">
                <el-tag :type="getStatusTag(currentDisposal.status)">
                  {{ getStatusText(currentDisposal.status) }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="质检状态">
                <el-tag
                  v-if="currentDisposal.qualityStatus"
                  :type="getQualityStatusTag(currentDisposal.qualityStatus)"
                >
                  {{ getQualityStatusText(currentDisposal.qualityStatus) }}
                </el-tag>
                <span v-else>-</span>
              </el-descriptions-item>
              <el-descriptions-item label="投递时间">
                {{ formatDateTime(currentDisposal.createdAt) }}
              </el-descriptions-item>
              <el-descriptions-item label="处理时间">
                {{ currentDisposal.processedAt ? formatDateTime(currentDisposal.processedAt) : '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="处理人员">
                {{ currentDisposal.processedBy || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="异常原因">
                {{ currentDisposal.exceptionReason || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="处理备注">
                {{ currentDisposal.processRemark || '-' }}
              </el-descriptions-item>
              <el-descriptions-item label="IP地址">
                {{ currentDisposal.ipAddress || '-' }}
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <!-- 投递图片 -->
        <div class="disposal-images" style="margin-top: 20px;">
          <h4>投递图片</h4>
          <div class="image-gallery">
            <div
              v-for="(image, index) in currentDisposal.images"
              :key="index"
              class="image-item"
            >
              <el-image
                :src="image.url"
                :alt="image.description"
                fit="cover"
                :preview-src-list="currentDisposal.images.map((img: any) => img.url)"
                :initial-index="index"
                class="disposal-image"
              />
              <div class="image-description">{{ image.description }}</div>
            </div>
          </div>
        </div>

        <!-- 处理历史 -->
        <div class="process-history" style="margin-top: 20px;">
          <h4>处理历史</h4>
          <el-timeline>
            <el-timeline-item
              v-for="(history, index) in currentDisposal.processHistory"
              :key="index"
              :timestamp="formatDateTime(history.createdAt)"
              :type="getHistoryType(history.action)"
            >
              <div class="history-content">
                <div class="history-action">{{ history.actionText }}</div>
                <div class="history-operator">操作人：{{ history.operator }}</div>
                <div v-if="history.remark" class="history-remark">备注：{{ history.remark }}</div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-dialog>

    <!-- 处理异常对话框 -->
    <el-dialog
      v-model="resolveDialogVisible"
      title="处理异常投递"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="resolveFormRef"
        :model="resolveForm"
        :rules="resolveRules"
        label-width="100px"
      >
        <el-form-item label="处理方式" prop="action">
          <el-radio-group v-model="resolveForm.action">
            <el-radio label="approve">确认有效</el-radio>
            <el-radio label="reject">确认无效</el-radio>
            <el-radio label="adjust">调整收益</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="resolveForm.action === 'adjust'"
          label="调整收益"
          prop="adjustedEarnings"
        >
          <el-input-number
            v-model="resolveForm.adjustedEarnings"
            :min="0"
            :max="1000"
            :precision="2"
            placeholder="请输入调整后的收益"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="处理备注" prop="remark">
          <el-input
            v-model="resolveForm.remark"
            type="textarea"
            :rows="4"
            placeholder="请输入处理备注"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="resolveDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleResolveSubmit" :loading="submitting">
          确认处理
        </el-button>
      </template>
    </el-dialog>

    <!-- 统计分析对话框 -->
    <el-dialog
      v-model="statisticsDialogVisible"
      title="投递统计分析"
      width="90%"
    >
      <div class="statistics-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card title="投递趋势">
              <div ref="disposalTrendChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card title="垃圾类型分布">
              <div ref="wasteTypeChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="12">
            <el-card title="设备投递排行">
              <div ref="deviceRankChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card title="异常分析">
              <div ref="exceptionChart" style="height: 300px;"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </PageContainer>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import {
  DocumentCopy,
  CircleCheck,
  Warning,
  Money,
  Download,
  DataAnalysis,
  Refresh,
  ArrowDown
} from '@element-plus/icons-vue'
import PageContainer from '@/components/PageContainer.vue'
import SearchForm from '@/components/SearchForm.vue'
import DataTable from '@/components/DataTable.vue'
import StatCard from '@/components/StatCard.vue'
import { useDisposalStore } from '@/stores/disposal'
import { useDeviceStore } from '@/stores/device'
import { formatDateTime } from '@/utils'

const disposalStore = useDisposalStore()
const deviceStore = useDeviceStore()

const loading = ref(false)
const submitting = ref(false)
const detailDialogVisible = ref(false)
const resolveDialogVisible = ref(false)
const statisticsDialogVisible = ref(false)
const currentDisposal = ref<any>(null)
const selectedRows = ref<any[]>([])
const resolveFormRef = ref<FormInstance>()

// 搜索表单
const searchForm = reactive({
  keyword: '',
  status: '',
  wasteType: '',
  deviceId: '',
  dateRange: [],
  minWeight: null,
  maxWeight: null
})

// 分页信息
const pagination = reactive({
  page: 1,
  size: 20,
  total: 0
})

// 投递统计
const disposalStats = reactive({
  totalCount: '2,856',
  totalTrend: '+15.2%',
  successCount: '2,698',
  successTrend: '+18.5%',
  exceptionCount: '158',
  exceptionTrend: '-8.3%',
  totalEarnings: '45,680.50',
  earningsTrend: '+22.1%'
})

// 投递列表
const disposalList = ref<any[]>([])

// 设备选项
const deviceOptions = ref<any[]>([])

// 处理表单
const resolveForm = reactive({
  action: 'approve',
  adjustedEarnings: 0,
  remark: ''
})

// 表单验证规则
const resolveRules: FormRules = {
  action: [
    { required: true, message: '请选择处理方式', trigger: 'change' }
  ],
  adjustedEarnings: [
    { required: true, message: '请输入调整后的收益', trigger: 'blur' },
    { type: 'number', min: 0, max: 1000, message: '收益范围在 0 到 1000 元', trigger: 'blur' }
  ],
  remark: [
    { required: true, message: '请输入处理备注', trigger: 'blur' },
    { min: 5, max: 500, message: '备注长度在 5 到 500 个字符', trigger: 'blur' }
  ]
}

// 获取垃圾类型标签
const getWasteTypeTag = (type: string) => {
  switch (type) {
    case 'plastic':
      return 'primary'
    case 'paper':
      return 'success'
    case 'metal':
      return 'warning'
    case 'glass':
      return 'info'
    case 'textile':
      return 'danger'
    default:
      return ''
  }
}

// 获取垃圾类型文本
const getWasteTypeText = (type: string) => {
  switch (type) {
    case 'plastic':
      return '塑料'
    case 'paper':
      return '纸类'
    case 'metal':
      return '金属'
    case 'glass':
      return '玻璃'
    case 'textile':
      return '织物'
    case 'other':
      return '其他'
    default:
      return '未知'
  }
}

// 获取状态标签
const getStatusTag = (status: string) => {
  switch (status) {
    case 'success':
      return 'success'
    case 'exception':
      return 'danger'
    case 'pending':
      return 'warning'
    case 'cancelled':
      return 'info'
    default:
      return ''
  }
}

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case 'success':
      return '成功'
    case 'exception':
      return '异常'
    case 'pending':
      return '待处理'
    case 'cancelled':
      return '已取消'
    default:
      return '未知'
  }
}

// 获取质检状态标签
const getQualityStatusTag = (status: string) => {
  switch (status) {
    case 'passed':
      return 'success'
    case 'failed':
      return 'danger'
    case 'pending':
      return 'warning'
    default:
      return 'info'
  }
}

// 获取质检状态文本
const getQualityStatusText = (status: string) => {
  switch (status) {
    case 'passed':
      return '通过'
    case 'failed':
      return '不通过'
    case 'pending':
      return '待质检'
    default:
      return '未质检'
  }
}

// 获取历史类型
const getHistoryType = (action: string) => {
  switch (action) {
    case 'create':
      return 'primary'
    case 'process':
      return 'success'
    case 'exception':
      return 'danger'
    case 'cancel':
      return 'info'
    default:
      return 'primary'
  }
}

// 加载投递列表
const loadDisposalList = async () => {
  loading.value = true
  try {
    const params = {
      ...searchForm,
      page: pagination.page,
      size: pagination.size
    }
    const response = await disposalStore.fetchDisposalList(params)
    disposalList.value = response.list
    pagination.total = response.total
  } catch (error) {
    ElMessage.error('加载投递列表失败')
  } finally {
    loading.value = false
  }
}

// 加载设备选项
const loadDeviceOptions = async () => {
  try {
    const response = await deviceStore.fetchDeviceList({ page: 1, size: 1000 })
    deviceOptions.value = response.list
  } catch (error) {
    console.error('加载设备选项失败:', error)
  }
}

// 搜索处理
const handleSearch = () => {
  pagination.page = 1
  loadDisposalList()
}

// 重置处理
const handleReset = () => {
  pagination.page = 1
  loadDisposalList()
}

// 分页处理
const handlePageChange = (page: number) => {
  pagination.page = page
  loadDisposalList()
}

const handleSizeChange = (size: number) => {
  pagination.size = size
  pagination.page = 1
  loadDisposalList()
}

// 选择处理
const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
}

// 查看详情
const handleViewDetail = async (row: any) => {
  // 模拟获取投递详细信息
  currentDisposal.value = {
    ...row,
    processedBy: '管理员',
    exceptionReason: '重量异常',
    processRemark: '用户投递的垃圾重量与系统检测不符',
    ipAddress: '192.168.1.100',
    images: [
      {
        url: 'https://via.placeholder.com/300x200?text=投递前',
        description: '投递前照片'
      },
      {
        url: 'https://via.placeholder.com/300x200?text=投递后',
        description: '投递后照片'
      }
    ],
    processHistory: [
      {
        action: 'create',
        actionText: '用户投递垃圾',
        operator: '张三',
        createdAt: '2024-01-15 14:30:00',
        remark: '用户正常投递塑料垃圾'
      },
      {
        action: 'exception',
        actionText: '系统检测异常',
        operator: '系统',
        createdAt: '2024-01-15 14:31:00',
        remark: '重量检测异常，实际重量与预期不符'
      },
      {
        action: 'process',
        actionText: '人工处理',
        operator: '管理员',
        createdAt: '2024-01-15 15:00:00',
        remark: '经人工核实，确认投递有效'
      }
    ]
  }
  detailDialogVisible.value = true
}

// 处理异常
const handleResolve = (row: any) => {
  currentDisposal.value = row
  Object.assign(resolveForm, {
    action: 'approve',
    adjustedEarnings: row.earnings,
    remark: ''
  })
  resolveDialogVisible.value = true
}

// 处理表单提交
const handleResolveSubmit = async () => {
  if (!resolveFormRef.value) return
  
  try {
    await resolveFormRef.value.validate()
    submitting.value = true
    
    // 调用处理异常API
    ElMessage.success('处理成功')
    resolveDialogVisible.value = false
    loadDisposalList()
  } catch (error) {
    ElMessage.error('处理失败')
  } finally {
    submitting.value = false
  }
}

// 批量标记异常
const handleBatchException = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要将选中的 ${selectedRows.value.length} 条记录标记为异常吗？`,
      '批量标记异常',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 调用批量标记异常API
    ElMessage.success('批量标记异常成功')
    loadDisposalList()
  } catch (error) {
    // 用户取消
  }
}

// 批量处理
const handleBatchResolve = async () => {
  try {
    await ElMessageBox.confirm(
      `确定要批量处理选中的 ${selectedRows.value.length} 条异常记录吗？`,
      '批量处理',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 调用批量处理API
    ElMessage.success('批量处理成功')
    loadDisposalList()
  } catch (error) {
    // 用户取消
  }
}

// 导出数据
const handleExport = () => {
  ElMessage.info('导出功能开发中...')
}

// 统计分析
const handleStatistics = () => {
  statisticsDialogVisible.value = true
  nextTick(() => {
    // 这里可以初始化图表
    ElMessage.info('统计图表功能开发中...')
  })
}

// 更多操作
const handleMoreAction = (command: string, row: any) => {
  switch (command) {
    case 'quality-check':
      ElMessage.info('质检处理功能开发中...')
      break
    case 'view-images':
      ElMessage.info('查看图片功能开发中...')
      break
    case 'user-profile':
      ElMessage.info('用户档案功能开发中...')
      break
    case 'device-status':
      ElMessage.info('设备状态功能开发中...')
      break
    case 'mark-exception':
      ElMessage.info('标记异常功能开发中...')
      break
    case 'cancel':
      ElMessage.info('取消投递功能开发中...')
      break
  }
}

onMounted(() => {
  loadDisposalList()
  loadDeviceOptions()
})
</script>

<style lang="scss" scoped>
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

  .action-left,
  .action-right {
    display: flex;
    gap: 12px;
  }
}

.weight-range {
  display: flex;
  align-items: center;
}

.user-info,
.device-info {
  .user-name,
  .device-name {
    font-weight: 600;
    margin-bottom: 4px;
  }

  .user-phone,
  .device-code {
    font-size: 12px;
    color: #909399;
  }
}

.weight-value {
  font-weight: 600;
  color: #409EFF;
}

.earnings-value {
  font-weight: 600;
  color: #67C23A;
}

.text-muted {
  color: #909399;
}

.disposal-detail {
  .disposal-images {
    h4 {
      margin-bottom: 16px;
      color: #303133;
    }

    .image-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;

      .image-item {
        text-align: center;

        .disposal-image {
          width: 100%;
          height: 150px;
          border-radius: 4px;
        }

        .image-description {
          margin-top: 8px;
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }

  .process-history {
    h4 {
      margin-bottom: 16px;
      color: #303133;
    }

    .history-content {
      .history-action {
        font-weight: 600;
        margin-bottom: 4px;
      }

      .history-operator {
        font-size: 12px;
        color: #909399;
        margin-bottom: 4px;
      }

      .history-remark {
        font-size: 12px;
        color: #606266;
      }
    }
  }
}

.statistics-content {
  .el-card {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .action-bar {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;

    .action-left,
    .action-right {
      justify-content: center;
    }
  }

  .weight-range {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .disposal-detail {
    .image-gallery {
      grid-template-columns: 1fr;
    }
  }
}
</style>